<template>
  <div class="new full-height bg-white page-content relative-position">
    <div class="full-height">
      <div class="title margin-l-20 margin-r-20 margin-t-20" style="border-bottom: 1px solid rgba(211,211,211,1); padding: 0 15%">
          <span style="font-size:22px; margin-right: 10px; color:rgba(51,51,51,1)">新闻中心</span>
          <span style="font-size:16px; color:rgba(153,153,153,1);">Information Center</span>
      </div>
      <!-- 卡片列表 -->
      <q-scroll-area  ref="scrollTargetRef" style="margin: 0 10px;flex: 1;height: calc(100% - 90px)" :thumb-style="thumbStyle">
        <q-infinite-scroll @load="getList" :offset="250" :scroll-target="$refs.scrollTargetRef" ref="scrollTarget">
          <div class="row flex" style=" padding: 0 15%">
            <div class=" card-item col-lg-4 col-md-6 col-sm-12"  v-for="(item, index) in newsList" :key="index" @click="toDetail(item.id)">
              <div class="card">
                <div class="top" style="overflow: hidden">
                  <q-img v-if="item.firstPic"
                    :src="item.firstPic"
                    style="height: 150px; width:100% ; border-radius:6px 6px 0 0"
                    :ratio="1"
                    basic
                    transition="scale"
                    spinner-color="white"
                    class="rounded-borders">
                    <template v-slot:error>
                      <q-img
                        src="../../statics/img/img-load-fail.png"
                        style="height: 150px; width:100% ; border-radius:6px 6px 0 0"
                        class="rounded-borders" />
                    </template>
                    <template v-slot:loading>
                      <q-spinner-gears color="primary" />
                    </template>
                  </q-img>
                  <q-img v-else
                    src="../../statics/img/no-img.png"
                    style="height: 150px; width:100% ; border-radius:6px 6px 0 0"
                    :ratio="1"
                    basic
                    transition="scale"
                    spinner-color="white"
                    class="rounded-borders">
                    <template v-slot:error>
                      <q-img
                        src="../../statics/img/img-load-fail.png"
                        style="height: 150px; width:100% ; border-radius:6px 6px 0 0"
                        class="rounded-borders" />
                    </template>
                    <template v-slot:loading>
                      <q-spinner-gears color="primary" />
                    </template>
                  </q-img>
<!--                    <img :src="item.firstPic" style="height: 150px; width:100% ; border-radius:6px 6px 0 0 " />-->
                </div>
                <div class="bottom">
                  <div class="text-center new-title">{{item.title}}</div>
                  <div class="content" style="">{{item.content}}</div>
                  <div class="new-date">{{item.createDate}}</div>
                </div>
              </div>
            </div>
          </div>
        </q-infinite-scroll>
        <div class="text-center margin-t-20" >
          <q-btn class="btn"
                 style="width: 96px"
                 unelevated
                 color="primary"
                 @click="$router.go(-1)"
                 label="返回" />
        </div>
      </q-scroll-area>
    </div>
  </div>
</template>

<script>
// import newsList from './components/news-list'
import { getNoticeNewsContent } from 'src/boot/home/home-new'
export default {
  name: 'news',
  data () {
    return {
      // 滚动条样式
      thumbStyle: this.CommonConfig.thumbStyle,
      newsList: [],
      pageNum: 0, // 当前页数
      pageSize: 20, // 每页多少条
      listDone: false
    }
  },
  methods: {
    getList (index, done) {
      ++this.pageNum
      let params = {
        category: 'NEWS',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getNoticeNewsContent(params).then(res => {
        this.newsList.push(...res.data.records)
        this.listDone = res.data.records.length === 0
        done(this.listDone)
      })
    },
    toDetail (id) {
      this.$router.push({
        path: `/main/home/news/news-detail_1`,
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped  lang="stylus">
  .card-item {
    padding 20px 10px 10px
    .card {
      height:320px;
      border-radius:6px ;
      border:1px solid rgba(211,211,211,1);
      transition all 500ms ease-in-out
      -moz-transition all 500ms ease-in-out
      -webkit-transition all 500ms ease-in-out
      -o-transition all 500ms ease-in-out
      position relative
      cursor pointer
    }
    .top {
      width: 100%;
      height: 151px
      border-bottom 1px solid #D3D3D3
    }
  }
  .card-item:hover .card{
    top -10px
  }
  .card:hover{
    top -10px
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.15);
  }
  .new-title {
      font-size:16px;
      margin-bottom: 18px;
      padding 20px 20px 0 20px
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1; //需要控制的文本行数
      overflow: hidden;
  }
  .content {
    height:64px;
    padding 0 22px 0 20px
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; //需要控制的文本行数
    overflow: hidden;
  }
  .new-date {
    text-align right
    padding 10px 20px 0 0
    font-size:14px;
    color:rgba(51,51,51,1);
  }
</style>
